import React, { useEffect } from 'react';

const { BMap } = window;
let thisMap = '';
export default () => {
  // Circle
  const pointCircles = () => {
    const dataList = [
      {
        id: 1001,
        name: '用户01',
        data_real_time: {
          baidu_lat: 118.805191,
          baidu_lng: 32.064735,
        },
      },
      {
        id: 1002,
        name: '用户02',
        data_real_time: {
          baidu_lat: 119.063615,
          baidu_lng: 32.175805,
        },
      },
      {
        id: 1002,
        name: '用户02',
        data_real_time: {
          baidu_lat: 118.918736,
          baidu_lng: 32.079666,
        },
      },
      {
        id: 1002,
        name: '用户02',
        data_real_time: {
          baidu_lat: 118.864119,
          baidu_lng: 32.030947,
        },
      },
    ];
    dataList.forEach((item) => {
      const point = new BMap.Point(item?.data_real_time.baidu_lat, item?.data_real_time.baidu_lng);
      const circle = new BMap.Circle(point, 1000, {
        fillColor: 'blue',
        strokeWeight: 2,
        fillOpacity: 0.3,
        strokeOpacity: 0.3,
      });
      circle.addEventListener('mouseover', (e) => {
        //   circle.setOpacity(1);
        e.target.setFillColor('#f00');
      });
      circle.addEventListener('mouseout', function (e) {
        e.target.setFillColor('#454399');
      });
      circle.addEventListener('click', function () {
        //   alert('click!');
      });
      thisMap.addOverlay(circle);
    });
  };
  useEffect(() => {
    const map = new BMap.Map('container', {
      restrictCenter: false,
    });
    map.setMapStyle({
      style: 'dark',
    });

    console.log('map', map);
    // map.setMapStyleV2({
    //   styleId: '3d71dc5a4ce6222d3396801dee06622d',
    // });
    thisMap = map;
    const point = new BMap.Point(118.805191, 32.064735);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom();
    pointCircles();
  });
  return (
    <div>
      地图模块
      <div id="container" style={{ height: '100vh' }}></div>
    </div>
  );
};
